/**************************************/
/*【Master Stylesheet】
/**************************************/
/* css[1.1].css 全同一頁(Page用無し)
/*(全同一頁)【Page用】無し*/
/*====================================*/
/*====================================*/
/*【要素】
Base, サイト設定
/*====================================*/
@charset "utf-8";
html {
overflow: scroll;
overflow: -moz- scroll bars- vertical;
overflow-x: scroll;
}
/* スクロールバーを常に表示する
/* ブラウザーや表示域の大小によらず常に表示する */
/*====================================*/
/*【要素】
document body, 本体, サイト全体の指定
/*====================================*/
body {
margin: 0px;
padding: 0px;
font-family:
"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka,
"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #003366; /*[文字色]*/
/* #003366ブルーブラック #ffffff白 */
background-color: #FFFFFF; /*[全体の地色]*/
/* #ffffff白
transparent透明＝色設定の解除 */
}
/* background-image: /*[背景画像]*/
/* url("Upload/Cvr&Smbl/$ Bnr, BGImg/bg12w060h.png");
/* background-repeat: repeat-x; /* */
/*【リンク部分の色】*/
a {
color: #000066;
/* #017acdコバルト */
}
/*====================================*/
/*【コンテナー指定】#container
入れ物, 文書群ボックス
┌─────────────────┐
│ id="container" │
│ │
/*====================================*/
#container
{ width: 840px; /*700px*/
margin-top: 0;
margin-right: auto; /* 中央揃えに */
margin-bottom: 0;
margin-left: auto; /* 中央揃えに */
padding: 0;
background-color: #ffffff; /*[コンテナ範囲地色]*/
/* #ffffff=白 #efeeef=極薄い灰 */
}
/* background-image: /*コンテナー範囲の背景画像 */
/*url(../90Gnrl_pic/sq20px-BGI-Sq.gif); */
/* background-repeat:
/*repeat-y; /*縦方向にのみ繰り返し*/
/*====================================*/
/*【ヘッダー指定】#header
┌─────────────────┐
│┏━━━━━━━━━━━━━━━┓│
│┃ id="header" ┃│
│┣━━━━━━━━━━━━━━━┫│
││ ││
/*====================================*/
#header
{
height: auto; /*ヘッダーエリアの高さ*/
margin: 4px 4px 4px 4px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
background-color: #333399; /*ヘッダー部の地色 #005087紺 #333399紺2 #ffffff白 */
background-image:url("Upload/$0[Accessory]/[1 BGImg]/bg01_w12,h084.png"); /*ヘッダー部の背景画像*/
background-repeat: repeat-x; /* */
/* background-position: 0px 0px 0px; */ /*背景画像の表示位置 元 0 -60px */
/* border-bottom: solid 1px #666666; */ /*下に線を引く⇒ 無しに */
}
#header p {
margin: 0px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 10px 0px 10px;/*上 右 下 左 */
float:left;
color: #FFFFFF; /*#66CCFF水色 #005087紺*/
font-size: 1em;
line-height: 1.25em;
}
#header h1 {
margin: 0px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 20px 0px 20px;/*上 右 下 左 */
float:left;
font-size: 1em;
line-height: 1.25em;
color: #FFFFFF; /*文字色*/ /* #005087紺*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
/* background-image:url(../90Gnrl_pic/bar-blue564x28.png); */ /* h1へのバックイメージ＝なし */
/* background-repeat: repeat-x; */
/* background-position: center; */
}
#header h2 {
margin: 0px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 20px 0px 20px;/*上 右 下 左 */
float:right;
font-size: 1em;
line-height: 1.25em;
color: #66CCFF; /*#005087紺*/
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
}
/*====================================*/
/*背景色 #6699CC薄花田 #EFE6C6フレッシュ #e6e9C6タン #99CC99暗黄緑 #CCCC99薄カーキ #ffffcc薄黄*/
/*ナビ部分背景色 #0000ee=青 #005087=花田 #1c178f=濃紺 #333399=くすみ濃紺 */
/*====================================*/
/*【グローバルナビ】ul#G-Nav
global-navigation
┌┏━━━━━━━━━━━━━━━┓┐
│┃ ul id="G-Nav" ┃│
│┗━━━━━━━━━━━━━━━┛│
│└────────≪個別設定≫─┘│
/*====================================*/
ul#G-Nav {
height: 80px;
font-size: 2.0em;
/* font-weight: bold; /* */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color: #1c178f;
/* background-color: ナビ部分背景色 #6699CC薄花田 #005087=花田 #0000ee=青 #1c178f=濃紺 #333399=くすみ濃紺 */
/* background-image: url(../P0_UpImages/roll_120x32px.png); /*ナビ部分 背景画像*/
}
ul#G-Nav li {list-style-type: none;
float: left;
}
ul#G-Nav li a {
display: block;
width: 170px;
line-height: 80px;
text-decoration: none;
text-align: center;
color: #ffffff;
background-color: #005087;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg01'roll_168x240px.png");
/* border-right: solid 1px #ffffff; */ /*コマの右に線を引く⇒ 無しに */
}
ul#G-Nav li a:hover {/*【カーソル合わせ】*/
background-color: #017acd;
background-position: left bottom;
}
ul#G-Nav .menuAct {/*【アクティブな現ページ】*/
color: #555555;
float: left;
width: 170px;
text-align: center;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg01'roll_168x80px_Act.png"); /* 現ページのボタン */
line-height: 80px;
font-weight: bold;
}
ul#G-Nav .blind {/*【隠しメニュー】*/
color: #2b23af;
float: left;
width: 150px;
text-align: center;
font-weight: bold;
}
/*/【トピックパス】topicpath パンくずリスト p#bread breadcrumbs /*/
/*/トピックパス #topic /*/
p#topic {
/* float: right; */
background-color: #FFFFFF;
font-size: 0.75em;
margin: 0;
padding: 0px 20px 0px 20px;
}
/*====================================*/
/*【コンテンツ指定】#content
【トップページコンテンツ指定】#content-top
content, main メイン文書
┌┌───────────────┐┐
│┏ id="content" ━━━━━━━━┓│
│┃ ┃│
/*====================================*/
#content {
margin: 0px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 5px;
width: 830px;/*container 840*/
float: left; /*フロート*/
display: inline;
background-color: #ffffff;/**/
}
#content-top {
margin: 0px 0px 0px 0px;/* container'margin-top 0; -right auto; -bottom 0; -left auto; */
padding: 0px 0px 0px 0px;/* container'padding: 0; */
width: 700px;/* container'width 500 */
float: left;
display: inline;
background-color: #ffffff;/**/
/*メイン文書の右に線を引く*/
/* border-right: solid 1px #666666;*/
}
/*【 p 】*/
#content p {
margin: 0px 5px 0px 10px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
font-size: 1em;
line-height: 1.75em;
} /* */
#content-top p {
margin: 5px 15px 10px 15px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
font-size: 1em;
line-height: 1.75em;
}
/*【 img 】*/
#content img {
padding: 0px 10px 0px 10px;/*上 右 下 左 */
/* float: left; */
}
#content-top img {
float: left; /* */
/* text-align: none;
/* right left center none */
}
/*【 h1 】*/
#content h1 {
margin: 0px 5px 0px 5px;/*上 右 下 左 */
padding: 3px 0px 10px 0px;
color: #0000CC;
font-size: 1em;
line-height: 1.25em;
text-align: center; /* */
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bt-roll-120x45Act.png");
background-repeat: repeat-x;
background-color: #FFFFFF;
}
#content h1 #img {
padding: 3px 20px 0px 20px;/*上 右 下 左 */
text-align: none; /* right left center none */
/* text-align: left; /* */
}
#content-top h1 {
margin: 6px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
color: #0000CC;
font-size: 1.25em;
line-height: 1.75em;
text-align: center; /* */
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bt-roll-120x45Act.png");
background-repeat: repeat-x;
background-color: #FFFFFF;
}
#content-top h1 #img {
margin: 6px 0px 0px 0px;/*上 右 下 左 */
text-align: none; /* right left none */
/* text-align: left; /* */
}
/*【 h2 】*/
#content h2 {
margin: 0px 5px 5px 5px;/*上 右 下 左 */
padding: 2px 0px 0px 0px;
color: #FFFF00;
font-size: 1em;
line-height: 1.5em;
text-align: center; /* */
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg01'bar_h32sq.png");
background-repeat: repeat-x;
background-color: #0000CC;
text-align: center;
}
#content-top h2 {
margin: 6px 0px 10px 5px;/*上 右 下 左 */
padding: 0px 0px 0px 10px;
color: #FFFF00;
font-size: 1em;
line-height: 1.75em;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg01'bar_h32sq.png");
background-repeat: repeat-x;
background-color: #0000CC;
}
/*【 h3 】*/
#content h3 {
margin: 0px 5px 5px 5px;/*上 右 下 左 */
padding: 2px 0px 0px 10px;
font-size: 1em;
line-height: 1.5em;
text-align: center; /* */
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg24Aq_24sq.png");
background-repeat: repeat-x;
/* background-color: #99CCFF; */
text-align: center;
line-height: 1.2;
}
#content-top h3 {
margin: 4px 0px 10px 5px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
font-size: 1em;
line-height: 1.5em;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg24Aq_24sq.png");
background-repeat: repeat-x;
background-color: #00FFFF;
}
/*【 h3 】*/
#content h4 {
margin: 5px 5px 0px 5px;/*上 右 下 左 */
padding: 0px 0px 0px 10px;
font-size: 1em;
line-height: 2.0em;
}
#content-top h4 {
margin: 4px 0px 10px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
font-size: 1.15em;
line-height: 1.75em;
}
/*【注釈 Note 】*/
#content Note {
margin: 10px 0px 0px 10px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
font-size: 0.8em;
line-height: 1.5em;
}
#content-top Note {
font-size: 0.85em;
line-height: 1.5em;
margin: 5px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
}
/*【注釈 Note 中央揃え 】*/
#content Note-Center {
margin: 10px 0px 0px 10px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
font-size: 0.8em;
line-height: 1.5em;
text-align: center; /* */
}
#content-top p#message {margin-top: 0}
#content-top p#message {margin-top: 0}
/**************************************/
/* ◆◆【追加クラス】◆◆ */
/**************************************/
/*テキスト スクロール Text scroll */
.txt-scroll {
/*スクロールバー↓scroll常につける, auto指定サイズを超えたとき*/
overflow: auto;
width: 580px;
height: 180px;
margin: 0px 0px 20px;
padding: 0px 0px 20px;
}
/*強調文字*/
.deforme {
background-color: #dee;
color: #666;
font-size: 0.9em;
font-weight: bold;
text-decoration: none; /*無しnone*/
}
/*注釈*/
.note {
font-size: 0.75em;
line-height: 1.5em;
margin: 0px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
}
/*====================================*/
/*【フロート】float: right/left/center;
/*右フロート*/
.float-right {
float: right;
padding: 0px 5px 0px 20px;
}
/*右フロート,幅360px,文字左配置*/
.float-right-w360 {
float: right;
text-align: center;
margin: 0px 5px 0px 5px;
padding: 0px 0px 0px 0px;
width: 360px;/* ボックス幅 140px */
}
/*右フロート,幅150px,文字中央配置*/
.float-right-150-center {
float: right;
text-align: center;
margin: 0px;
padding: 0px;
width: 150px;/* ボックス幅 150px */
}
/*右フロート,幅150px,文字左配置*/
.float-right-150 {
float: right;
margin: 0px;
padding: 0px;
width: 150px;/* ボックス幅 150px */
}
/*左フロート*/
.float-left {
float: left;
padding: 0px 20px 0px 5px;
}
/*左フロート,幅148px,文字右配置*/
.float-left-148 {
float: left;
margin: 20px;
padding: 20px;
width: 148px;/* ボックス幅 148px */
}
/*====================================*/
/*【テキスト配置】text-align: right/center/left;
/*テキスト右配置*/
.txt-right {
text-align: right;
}
/*テキスト中央配置*/
.txt-center {
text-align: center;
}
/*テキスト左配置*/
.txt-left {
text-align: left;
}
/*====================================*/
/*【 feed 】
*/
.feed {
font-size: 0.675em;
color: #003333; /*#003333濃灰*/
line-height: 1.5em;
margin: 8px 0px 10px 0px;
}
.feed a {
line-height: 30px;
text-align: center;
font-size: 0.85em;
color: #ffffff;
text-decoration: none;
text-align: center;
background-color: #666666; /*#666666濃灰*/
/*サイドバーの下に線を引く⇒ 無しに */
/**/ border: solid 1px #888888;/**/
padding: 5px 0px 5px 0px;
}
.feed img {
vertical-align: middle;
border: none;
}
/*====================================*/
/*背景色 #6699CC薄花田 #EFE6C6フレッシュ #e6e9C6タン #99CC99暗黄緑 #CCCC99薄カーキ #ffffcc薄黄*/
/*ナビ部分背景色 #0000ee=青 #005087=花田 #1c178f=濃紺 #333399=くすみ濃紺 */
/*====================================*/
/*【サイドメニュー】#sidebar
sidebar navigation
┌─────────────────┐
│┌───────────┐┏━━┓│
││ id="sidebar"│┃ ┃│
/*====================================*/
/* #ffffcc薄黄 #CCCC99薄カーキ #6699CC薄花田 */
#sidebar {
width: 200px;
margin: 0px 0px 0px 0px;/* 上 右 下 左 */
padding: 0px 4px 10px 4px;
float: right;
font-weight: normal;
background-color: #cccccc;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg_sq20px-light.gif");
/*背景色*/ /*#cccccc:グレー #6699CC薄花田 #EFE6C6フレッシュ #e6e9C6タン #99CC99暗黄緑 #CCCC99薄カーキ #ffffcc薄黄*/
/*背景画*/ /*[Bnr,BGI]/bg_sq20px-light.gif*/
border-right: solid 2px #cccccc; /*サイドバー右枠線*/ /*#cccccc:グレー*/
border-left: solid 2px #cccccc; /*サイドバー左枠線*/
border-bottom: solid 2px #cccccc; /*サイドバー下枠線*/
}
ul.sidemenu {
margin: 0px 0px 0px 0px; /*上,右,下,左 */
padding: 0px 0px 0px 0px;
line-height: 0; /**/
text-align: center; /* */
border-top: solid 2px #666666; /*上枠線*/ /*#666666:極濃灰*/
}
ul.sidemenu li {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 20px 0px;
}
ul.sidemenu li a {
display: block;
text-decoration: none;
color: #000000;
padding-left: 0px;/**/
background-color: transparent;
/* border-bottom: solid 2px #666666; /*下枠線*/ /*#666666:極濃灰*/
}
/*カーソルを合わせたとき*/
ul.sidemenu li a:hover {
background-color: #ffffcc; /*背景*/ /*#ffffcc:薄黄*/
color: #000000;/*文字色 #000000:黒*/
}
/*基本テキスト*/
#sidebar p {
margin: 0px 0px 12px 0px; /*上,右,下,左 */
padding: 0px 0px 0px 0px;
font-size: 0.75em;
color: #003333; /*文字色 #003333チャコール*/
line-height: 1.5em;
text-align: center; /**/
}
/*タイトル１ */
#sidebar h1 {
margin: 8px 0px 4px 0px; /*上,右,下,左 */
padding: 0px 0px 0px 0px;
font-size: 0.9em;
font-weight: bold;
line-height: 1.25em;
text-align: center;
background-color: transparent; /*背景色*/ /*transparent:透明*/
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg20G_w16.png"); /*背景図*/ /*bg20G_w16.png*//*bg16G_w32Rd.png =長丸の連続になる*/
}
/*タイトル２ */
#sidebar h2 {
margin: 8px 0px 4px 0px; /*上,右,下,左 */
padding: 0px 0px 0px 0px;
font-size: 0.75em;
font-weight: bold;
line-height: 1.25em;
text-align: center;
background-color: #e6e9C6; /*背景色*/ /*transparent:透明 #6699CC:薄花田 #EFE6C6:フレッシュ #e6e9C6:タン #99CC99:暗黄緑 #CCCC99:薄カーキ*/
/* background-image: url("Upload/! Cvr&Smbl/$ Bnr, BGImg/bg16sq.png"); /**/
}
/*メニュー１*/
#sidebar h3 {
margin: 0px 0px 0px 0px; /*上,右,下,左 */
padding: 4px 0px 0px 0px;
font-size: 0.9em;
font-weight: bold;
line-height: 2.0em; /**/
text-align: center;
background-color: #6699CC; /*背景色 transparent:透明 #6699CC:薄花田 #EFE6C6:フレッシュ #e6e9C6:タン #99CC99:暗黄緑 #CCCC99:薄カーキ*/
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg36Blu_36sq.png"); /*bn_10_w180,h60.png はテキストのline-heightに拘束*/
}
/*メニュー２*/
#sidebar h4 {
margin: 0px 0px 0px 0px; /*上,右,下,左 */
padding: 3px 0px 5px 0px;
font-size: 0.75em;
color: #FFFFFF; /*#003333濃灰*/
/* font-weight: bold; /* */
line-height: 1.5em;
text-align: center;
background-color: #6699CC; /*背景色 transparent:透明 #6699CC:薄花田 #EFE6C6:フレッシュ #e6e9C6:タン #99CC99:暗黄緑 #CCCC99:薄カーキ*/
/* background-image: url("Upload/! Cvr&Smbl/$ Bnr, BGImg/sq36px-h4-blu_ed.png"); /**/
}
/*/ --------------------------------
右サイドバー
-------------------------------- /*/
/* #sidebar-right 右サイドバー範囲設定 */
/* #sidebar-right 右サイドバー指定 */
/* .info 右サイドバー設定 */
/*====================================*/
/*【フッター 設定】#footer
││ id="footer" ││
│└───────────────┘│
└─────────────────┘
/*====================================*/
/*****************************************無効
#footer {
clear: both;
margin: 0;
padding: 0px;
font-size: 0.75em;
text-align: center;
border: none;
/* width: 760px;*/
}
/*****************************************無効
#footer h5 {
background-image:url("Upload/$0[Accessory]/[1 BGImg]/bg20G_w16.png");
background-repeat: repeat-x;/*横方向のみ*/
/*****************************************無効
background-position: center;
background-color: #ffffff;
line-height: 24px;
background-repeat: no-repeat;
/* border-top: solid 1px #666666;*/
/*線を無しにする */
/*****************************************無効
margin-left: 10px;
}
無効*****************************************/
#footer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 0.75em;
line-height: 1.2em;
text-align: center;
}
#footer h5 {
margin: 0px 40px 0px 40px;
padding: 0px 0px 0px 0px;
font-size: 0.75em;
background-image:url("Upload/$0[Accessory]/[1 BGImg]/bg20G_w16.png");
background-repeat: repeat-x;/*横方向のみ*/
/* background-repeat: no-repeat;/*リピートしない*/
background-position: center;
background-color: #ffffff;
/* border-top: solid 1px #666666;*/
border: none;/*線を無しにする */
}
/*アドレスaddress*/
address {
font-size: 0.75em;
font-style: normal;
color: #666666;
text-align: left;
padding: 0px;/* 12px */
}
/*フッターメニュー#bottom-nav*/
ul#bottom-nav {
font-size: 0.75em;
margin-top: 0;
margin-bottom: 0px;/* 3px */
margin-left: 0;
padding-left: 130;
height: 24px;
background-color: #005087;
background-image: url("Upload/$0[Accessory]/[Bnr,BGI]/btn-rollover03.png");
}
ul#bottom-nav li {
list-style-type: none;
float: left;
}
ul#bottom-nav li a {display: block;
width: 120px;
line-height: 24px;
text-decoration: none;
text-align: center;
color: #555555;
background-color: #005087;
background-image: url("Upload/$0[Accessory]/[Bnr,BGI]/btn-rollover03.png");
/*コマの右に線を引く⇒ 無しに */
/* border-right: solid 1px #ffffff;*/
}
ul#bottom-nav li a:hover {
color: #555555;
background-color: #017acd;
background-position: left bottom;
}
/* アクティブな現ページ */
ul#bottom-nav .menuAct {
color: #555555;
float: left;
width: 120px;
text-align: center;
/*現ページボタンbtn-menuAct02.png↓*/
background-image: url("Upload/$0[Accessory]/[1 BGImg]/btn-menuAct02.png");
line-height: 24px;
font-weight: bold; }
/**//**//*
【htmlへの記述への参考】
IDセレクター #idname
意味 id属性地が「idname」の要素
例 #header {color: #006600; }
CSS記述： #idname { 内容; }
div要素： ブロックに適用する要素のまとまり(ブロック要素 division~分割,区分~)
HTML記述： 内容(包含要素)～
クラスセレクター .classname
意味 class属性が「classname」の要素
例 .note {color: #ffoooo; }
CSS記述： .classname { 内容; }
span要素： インラインで適用する要素のまとまり(インライン要素 text span)
HTML記述： 内容(包含要素)～
ファビコン(favicon)を用意する
favicon: favorite+iconに由来。.ico形式、.png形式が一般的
.ico形式の場合
/png形式の場合
※ favicon.ico や favicon.png という名でサーバーのルート直下に置いておくと、ブラウザが自動的に読み込んでくれる。
ただし、サイトによっては、置き場所がルート直下とは限らないことから、(XHTMLの) head要素内に link要素を指定しておくと確実。
※ ファビコンサイズ 16px四方／制作(カンバスサイズ) 32px四方
クリアー： ぼーす；
clear: both;
┌─────────────────┐
│┌───────────┐┏━━┓│
││ id="sidebar"│┃ ┃│
││ id="footer" ││
│└───────────────┘│
└─────────────────┘
─┌└│┘┐├┬┴┤┼
━┏┗┃┛┓┣┳┻┫╋
/**//**//**/
/**//**//**//**//**//**//**//**/